<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         * {
      padding: 0;
      margin: 0;
    }

    #box {
      width: 470px;
      height: 150px;
      overflow: hidden;
      margin: 100px auto;
      position: absolute;
      left: 25%;
    }
    .list {
      width: 470px;
      position: absolute;
      height: 750px;
    }

    .list li {
      width: 470px;
      height: 150px;
      list-style: none;
    }
    .list li img {
      width: 470px;
      height: 150px;
    }
    .btn{
        width:150px;
        height: 30px;
        position: absolute;
        top:220px;
        left:600px;
    }
    .btn button{
        width: 20px;
        height: 20px;
    }

    </style>
</head>
<body>
    <div id="box">
        <ul class="list">
          <li><img src="./img/1.jpg" alt=""></li>
          <li><img src="./img/2.jpg" alt=""></li>
          <li><img src="./img/3.jpg" alt=""></li>
          <li><img src="./img/4.jpg" alt=""></li>
          <li><img src="./img/5.jpg" alt=""></li>
        </ul>
    </div>
      <div class="btn">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
     </div>
      <script src="js/move.js"></script>
    <script>
       let List = document.getElementsByClassName("list")[0];
        let now = 0;
            setInterval(function () {
            if (now>4) {
                now = 0;
            }
            startMove(List,{top: -150*now});
            now++;

        }, 1500);
    </script>
</body>
</html>